import * as PIXI from "pixi.js";
import { ShaderSystem } from "@pixi/core";
import React, { useEffect } from "react";
import "@pixi/unsafe-eval";
import { install } from "@pixi/unsafe-eval";
import { Spine } from "pixi-spine";
import "./App.css";

install({ ShaderSystem });

/**
 * 指示点击的图标
 */
const iconBase64Data =
  "";

// 跳过打印LOGO
PIXI.utils.skipHello();
// 初始化PIXI
const app = new PIXI.Application({
  backgroundAlpha: 0,
  // backgroundColor: 0xffffff,
  antialias: true,
  width: 1200,
  height: 720,
});
const loader = app.loader.add(
  "https://webcnstatic.yostar.net/ba_cn_web/prod/web/pc/Arona/Arona.atlas",
  "https://webcnstatic.yostar.net/ba_cn_web/prod/web/pc/Arona/Arona.json"
);
loader.load((l, res) => {
  const spineData = res[Object.keys(res)[0]].spineData!;
  const arona = new Spine(spineData);
  arona.scale.set(0.3);
  arona.state.setAnimation(0, "idle", true);
  arona.x = 1200 / 2;
  arona.y = 620;
  app.stage.addChild(arona);
});

function App() {
  useEffect(() => {
    const aronaContainer = document.getElementById("arona-container")!;
    if (!aronaContainer.hasChildNodes()) {
      aronaContainer.appendChild(app.view);
    }
  }, []);

  return (
    <div className="arona-page">
      <div className="arona-scene-container">
        <div style={{ height: 100 }} />
        <img
          src="https://webcnstatic.yostar.net/ba_cn_web/prod/web/assets/top_bg.b6c61b76.png"
          alt=""
          className="arona-backgroud"
        />
        <div id="arona-container" className="arona-container" />
        <div className="arona-fp-icon" onClick={() => {}}>
          <img alt="" src={iconBase64Data} />
          <img alt="" src={iconBase64Data} />
        </div>
      </div>
    </div>
  );
}

export default App;
